
<template>
    <div class="row row12">
        <div class="col-md-4 ">
            <ul class="flxe-column">
                <li class="nav-tabs" v-for="x in musiclist" :key="x.id">
                  <a href="javascript:void(0)">  {{x}} </a>
                </li>
            </ul>

        </div>

        <div class="col-md-8 ">
            <img src="../../static/image/004.jpg" alt="">
            <audio   controls  >
                <source src="" type="audio/mp3">
            </audio>

        </div>
    </div>
</template>

<script>
    export default {
        
        data() {
            return{
                // list:[]
                musiclist:[
                    "怪美的","消极掰","play","日不落","花蝴蝶","七上又八下","野蛮游戏",
                    "特务J","说爱你","黑发尤物","脑公","马德里不思议","布拉格广场","LOVE LOVE LOVE",
                    "倒带","爱情36计","说爱你","给我一首歌的时间","招牌动作","就是爱","美人计"
                    ,"愛无赦","乖猫","天空","I'm not yours","热冬","唯舞独尊","愈慢愈美丽","诗人漫步"
                ]
            };
        
        },
        methods: {
            // getajax(){
            //     this.$http.get("url").then(result =>{
            //         if (result.body.status === 0){
            //             this.list = result.body.message;
            //         }else{
            //             alert("加载失败")
            //         }
            //     });
            // }
            
        }
    };
</script>

<style  scoped>
.row12{
    height: 1500px;
    margin-top: 5px;
    margin-left: 0px;
    margin-right: 0px;
    padding: 0;


}
.md4{
 
    padding: 0;
    margin: 0;
}


.nav-tabs{
    list-style: none;
    height: 40px;
    line-height: 30px;
}
a{
    display: block;
}
a:hover{
    color: rgb(60, 4, 112);
}
a:visited{
    color: black;

}
audio{
    height: 30px;
    width: 100%;
}
.col-md-8,col-md-4 {
   
     padding: 0;
     margin: 0;

}
img{
    max-width: 100%;
}
</style>